import { Component, createApp } from 'vue'
import PreviewImageVue from '@/components/PreviewImage.vue'

function mountComponent(RootComponent: Component) {
  const app = createApp(RootComponent)
  const root = document.createElement('div')
  root.setAttribute('id', 'previewDom')
  document.body.appendChild(root)
  return {
    instance: app.mount(root),
    unmount() {
      console.log('unmount')
      document.body.removeChild(root)
    }
  }
}

const preview = {
  mounted(el: any) {
    el.style.cursor = 'zoom-in'
    el.addEventListener('click', () => {
      const imgSrc = el.getAttribute('src')
      const { instance, unmount } = mountComponent(PreviewImageVue)

      ;(instance as any).setSrc(imgSrc)
      ;(instance as any).show()
    })
  }
}

export default preview
